<template>
  <div class="order-footer-wrap">
    <ul class="jscenter">
      <li
        v-for="navItem in navList"
        :key="navItem.id"
        class="navitem"
        @click="handleClick(navItem)"
      >
        <nut-image class="navItemImg" :src="navItem.icon">
          <template #error>
            <nut-image
              src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
              fit="contain"
            /> </template
        ></nut-image>
        <p class="title">{{ navItem.text }}</p>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
const active = ref<unknown>(undefined);
const router = useRouter();
const props = defineProps(["groupbuy_id", "buy_type"]);
const emits = defineEmits(["stop", "delete"]);
const navList = reactive([
  {
    id: 1,
    text: "订单管理",
    icon: "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/4.png",
  },
  {
    id: 2,
    text: "删除团购",
    icon: "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/3.png",
  },
  {
    id: 3,
    text: "结束团购",
    icon: "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/2.png",
  },
  // {
  //   id: 4,
  //   text: "修改团购",
  //   icon: "https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/1.png",
  // },
]);
const handleClick = (item: any) => {
  active.value = item.id;
  if (item.id == 1) {
    router.push({
      path: "/ordermanage",
      query: { groupbuy_id: props.groupbuy_id },
    });
    return;
  } else if (item.id == 2) {
    emits("delete", item);
  } else if (item.id == 3) {
    emits("stop", item);
  } else if (item.id == 4) {
    if (props.buy_type == 1) {
      router.push({
        path: "/ordinary",
        query: { groupbuy_id: props.groupbuy_id },
      });
    } else if (props.buy_type == 2) {
      router.push({
        path: "/community",
        query: { groupbuy_id: props.groupbuy_id },
      });
    }
  }
};
</script>
<style scoped lang="scss">
.order-footer-wrap {
  position: fixed;
  bottom: 0;
  z-index: 2022;
  margin-top: 48px;
  height: 112px;
  background: #ffffff;
  padding: 10px 30px;
  width: -webkit-fill-available;
  ul {
    height: 100%;
  }
  .navitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .navItemImg {
      width: 48px;
      height: 48px;
    }
    .title {
      margin-top: 5px;
      color: #333333;
      font-size: 22px;
    }
  }
}
</style>
